<template>
  <el-card class="box-card">
    <div class="text item">
      <el-table :data="apiData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%"
        :row-class-name="tableRowClassName">
        <!-- <template v-for="(item,index) in tableData" :key="index">
          <el-table-column :prop="item.prop" :label="item.label" width="180" >

          </el-table-column>
        </template> -->
        <el-table-column label="Status" width="180">
          <template #default="scope">
            <el-button size="small" :type="buttonType(scope.row.status)" plain>
              <!-- <i class="el-icon-arrow-right"></i> -->
              <span style="margin-right: 10px">{{ scope.row.status}} </span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="Name" width="180">
          <template #default="scope">
            <router-link
              :to="{ path:'job',query:{ jobStatus:scope.row.status,jobName:scope.row.name,setid:scope.row.id,dateDiff:scope.row.created_at,commitUser:scope.row.commit_committer_name, 
                shortId:scope.row.short_id,commitMessage:scope.row.commit_message,pipelineId: scope.row.pipeline_id,jobRef:scope.row.ref }}"
              type="primary">
              {{scope.row.name}}
            </router-link>
          </template>
        </el-table-column>

        <el-table-column label="Job" width="200">
          <template #default="scope">
            <span style="margin-right: 10px"> # {{ scope.row.id }}</span>
            <i class="el-icon-link"></i>
            <span style="margin-right: 10px">{{ scope.row.ref }}</span>
            <i class="el-icon-toilet-paper"></i>
            <el-link href="http://www.baidu.com" type="primary">
              <span style=""> {{ scope.row.short_id }}</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="Pipeline" width="180">
          <template #default="scope">
            <el-link href="http://www.baidu.com" type="primary">
              <span style="margin-right: 8px"># {{ scope.row.pipeline_id }}</span>
            </el-link>
            by
            <el-link href="http://www.baidu.com" type="primary">
              <span style="margin-right: 0px"> {{ scope.row.commit_committer_name }}</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="stage" label="Stage" width="180"></el-table-column>
        <el-table-column label="Duration" width="180">
          <template #default="scope">
            <i :class="durationIcon(scope.row.status)" style="margin-right: 5px"></i>
            <el-tooltip placement="top">
              <template #content> {{scope.row.finished_at}} </template>
              <span style="margin-right: 0px"> {{ localDiff(scope.row.finished_at) }} </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="coverage" label="Coverage" width="180"></el-table-column>

      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper"
        :total="apiData.length">
      </el-pagination>
    </div>
  </el-card>
</template>

<script>

  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        // console.log(`每页 ${currentPage} 条`);
      },
      handleSizeChange: function (pagesize) {
        this.pagesize = pagesize;
        // console.log(`当前页: ${pagesize}`);
      },
      buttonType(val) {
        // console.log(val)
        if (val === 'skipped' || val === 'canceled') {
          return 'info'
        } else if (val === 'failed') {
          return 'danger'
        } else if (val === 'success') {
          return 'success'
        }
      },
      durationIcon(val) {
        if (val === 'failed') {
          return 'el-icon-date'
        }

      },
      // get localtime calculation time diff
      localDiff(val) {

        let date = new Date()
        // console.log(finished_at)
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        let minute = date.getMinutes();
        let hour = date.getHours();
        let second = date.getSeconds();
        let seperator1 = "-"
        let seperator2 = ":"
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if (hour >= 0 && hour <= 9) {
          hour = "0" + hour;
        }
        if (minute >= 0 && minute <= 9) {
          minute = "0" + minute;
        }
        if (second >= 0 && second <= 9) {
          second = "0" + second;
        }
        let currentdate = year + seperator1 + month + seperator1 + strDate + " " + hour + seperator2 + minute + seperator2 + second
        if (val !== null) {
          let remoteDate = new Date(val).getTime()
          let localDate = new Date(currentdate).getTime()
          let newDate = localDate - remoteDate
          // day
          let dayDiff = Math.floor(newDate / (24 * 3600 * 1000))

          let leave1 = newDate % (24 * 3600 * 1000)
          // hour
          let hourDiff = Math.floor(leave1 / (3600 * 1000))

          if (dayDiff === 0) {

            return hourDiff + " " + "hour ago"
          } else {
            return dayDiff + " " + " day ago"
          }


          // console.log(hourDiff)

        }
        // 
        // console.log(currentdate)
      },
    },
    data() {
      return {
        apiData: [],
        tableData: [
          { label: 'Status', JobId: 'Jobs ID', Name: "Name", prop: "status", },
          { label: 'Jobs ID', JobId: 'Jobs ID', Name: "Name", prop: "id", },
          { label: 'Name', JobId: 'Jobs ID', Name: "Name", prop: "name", },
          { label: 'Coverage', JobId: 'Jobs ID', Name: "Name", prop: "Coverage", },

        ],
        currentPage: 1,
        pagesize: 10,

      }
    },
    watch: {
      result(val) {
        // console.log(val)

        this.apiData = val
        // console.log(this.apiData)

      }
    },
    props: ["result"],
    // mounted() {
    //   this.remoteDuration()
    // }
  }
</script>
<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: auto;
  }
</style>